<template>
  <div class="video clrarfix">
    <Headers/>
    <div class="topic_block">
      <p class="user_info">
        <img src="../../images/mainTwo/video/2.png" />
        <span class="user_name">Another</span>
        <span class="foucs">217粉丝</span>
        <span class="attention">关注ta</span>
      </p>
      <div class="img_block">
        <img src="../../images/mainTwo/video/3.png" />
      </div>
    </div>
    <div class="img_text clearfix">
      <div class="time">
        <img src="../../images/mainTwo/video/7.png" />
        <span>九天前</span>
        <img src="../../images/mainTwo/video/8.png" />
        <span>3123</span>
      </div>
      <div class="like">
        <img src="../../images/mainTwo/video/9.png" />
        <span>30</span>
        <img src="../../images/mainTwo/video/10.png" />
        <span>500</span>
      </div>
    </div>

  </div>
</template>

<script>

import Headers from "../../components/header"

export default {
  name: "video",
  components: {
    Headers
  },
  data() {
    return {

    }
  }
}
</script>

<style  lang="less" scoped>
.topic_block {
  width: 706/75rem;
  height: 496/75rem;
  background: #fff;
  margin: 0 auto;
  margin-top: -150/75rem;
  box-shadow: 0 0 15px #ccc;
  border-radius: 15px;
  position: relative;
  .user_info {
    line-height: 60px; // margin-bottom: 0/75rem;
    img {
      width: 140/75rem;
      height: 140/75rem;
      border-radius: 15px;
      position: absolute;
      top: -30/75rem;
      left: 20/75rem;
    }
    .user_name {
      font-size: 30/75rem;
      position: absolute;
      top: 18/75rem;
      left: 200/75rem;
    }
    .foucs {
      font-size: 24/75rem;
      position: absolute;
      top: 60/75rem;
      left: 200/75rem;
    }
    .attention {
      width: 100/75rem;
      height: 30/rem;
      font-size: 24/75rem;
      border: 2px solid black;
      border-radius: 40/75rem;
      text-align: center;
      position: absolute;
      top: 50/75rem;
      right: 52/75rem;
    }
  }
  .img_block {
    width: 670/75rem;
    height: 320/75rem;
    margin: 0 auto;
    padding-top: 140/75rem;
    img {
      width: 670/75rem;
      height: 320/75rem;
    }
  }
}

.img_text {
  position: relative;
  .time {
    margin-top: -20/75rem;
    margin-left: 20/75rem;
    img {
      display: inline-block;
      width: 20/75rem;
      height: 20/75rem;
    }
    span {
      font-size: 18/75rem;
    }
  }
  .like {
    margin-top: -20/75rem;
    margin-left: 20/75rem;
    position: absolute;
    top:20/75rem;
    right: 20/75rem;
    img {
      display: inline-block;
      width: 20/75rem;
      height: 20/75rem;
    }
    span {
      font-size: 18/75rem;
    }
  }
}
</style>
